<template>
  <el-dialog :close-on-click-modal="false" custom-class="test-dialog" title="本步测试" :visible.sync="dialogVisible" width="500px">
    <div class="header">显示回复内容</div>
    <div class="content"></div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'TestDialog',
    data() {
      return {
        dialogVisible: false,
      }
    },
    methods: {
      showDialog() {
        this.dialogVisible = true
      },
      hideDialog() {
        this.dialogVisible = false
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog.test-dialog {
    .el-dialog__body {
      border-top: none;
      padding: 0 20px 20px;
      font-size: 14px;

      .header {
        margin: 0 0 5px;
      }

      .content {
        width: 100%;
        height: 400px;
        background: #e5e8ee;
        border-radius: 8px;
        overflow-y: auto;
      }
    }
  }
</style>
